<template>
  <!-- <div class="list"> -->
  <!-- 影院留言 -->
  <div class="cinema_message">
    <p class="title">影院留言</p>
    <!-- 用户留言列表 -->
    <div class="msgModule">
      <div v-for="(item, index) in msgList" :key="index" class="msg_list">
        <!-- 用户头像 -->
        <div class="avatar">
          <el-avatar :size="70" :src="item.user.avatar"></el-avatar>
        </div>
        <!-- 留言信息 -->
        <div class="info">
          <p>{{ item.user.nickname }}</p>
          <p class="content">{{ item.message.content }}</p>
          <p>Time: {{ item.message.createTime }}</p>
        </div>
      </div>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
import { cancelOrder } from "@/api/manager";
import { getMessage } from "@/api/message";
export default {
  data() {
    return {
      //   留言列表
      msgList: [],
    };
  },
  mounted() {
    this.loadMsgList();
  },
  methods: {
    // 获得影院留言列表
    loadMsgList() {
      getMessage().then((res) => {
        res.msg = "影院留言";
        for (let i = 0; i < res.data.length; i++) {
          res.data[i].message.createTime = this.formatDate(
            res.data[i].message.createTime
          );
        }
        // console.log(res)
        this.msgList = res.data;
      });
    },

    // 日期格式化
    formatDate(dateint) {
      var date = new Date(parseInt(dateint));
      var str = date.getFullYear() + "-";
      if (date.getMonth() < 10) {
        str += "0";
      }
      str += date.getMonth() + 1 + "-";
      if (date.getDate() < 10) {
        str += "0";
      }
      str += date.getDate() + " ";
      if (date.getHours() < 10) {
        str += "0";
      }
      str += date.getHours() + ":";
      if (date.getMinutes() < 10) {
        str += "0";
      }
      str += date.getMinutes() + ":";
      if (date.getSeconds() < 10) {
        str += "0";
      }
      str += date.getSeconds();
      return str;
    },
  },
};
</script>

<style lang='scss' scoped>
// .list {
//   width: 1100px;
//   height: 850px;
//   background-color: #fff;
//   margin: auto;
//   position: relative;
//   top: 25px;
//   overflow-x: hidden;
//   overflow-y: auto;
.cinema_message {
  width: 1100px;
  height: 870px;
  background-color: rgb(53, 59, 67);
  float: left;
  color: rgb(215, 215, 215);
  position: relative;
  margin: auto;
  top: 25px;
  left: 50px;
  overflow-x: hidden;
  overflow-y: auto;
  .title {
    font-size: 20px;
    font-weight: bold;
    padding: 40px;
    padding-left: 90px;
  }
  .msgModule {
    height: 800px;
    // overflow: auto;
    .msg_list {
      width: 730px;
      height: auto;
      padding: 0 90px;
      margin-bottom: 80px;
      .avatar {
        float: left;
      }
      .info {
        height: 85px;
        margin-left: 120px;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        font-size: 14px;
        .content {
          color: white;
          font-size: 18px;
        }
      }
    }
  }
  .addMsg {
    position: absolute;
    right: 80px;
    bottom: 50px;
  }
}
// }
</style>